<!--
 * @Date: 2023-04-29 17:52:37
 * @LastEditTime: 2023-05-06 09:39:20
 * @FilePath: /nlk/src/components/rework/Rpicker/Rpicker.vue
 * 介绍:
-->
<script lang="ts" setup>
import { PickerConfirmEventParams } from "vant";
import { useRpopupRef } from "../Rpopup";
const props = defineProps<{
  pickerData: Array<AnyObject> | undefined;
}>();

/**picker选择器弹窗 */
const RpopupRef = useRpopupRef();
//*切换coin
function onPickerConfirm(e: PickerConfirmEventParams) {
  const _elect = e.selectedOptions[0] as AnyObject;
  emit("confirm", _elect);
  elect.value = _elect;
  close();
}
const elect = ref<AnyObject>({});
const electIndex = ref(0);

function open() {
  RpopupRef.value?.open();
}
function close() {
  RpopupRef.value?.close();
}

watch(
  () => props.pickerData,
  (newValue) => {
    if (!newValue?.length) {
      electIndex.value = 0;
      elect.value = {};
      return;
    }
    electIndex.value = 0;
    elect.value = newValue[0];
  },
  { immediate: true }
);

const show = computed({
  get() {
    return RpopupRef.value?.show;
  },
  set(v) {
    if (!RpopupRef.value) return;
    RpopupRef.value.show = v || false;
  },
});

defineExpose({ open, close, show, elect });
const emit = defineEmits<{
  (e: "confirm", v: AnyObject): void;
}>();
</script>
<template>
  <div @click="open" class="BcoinPicker">
    <slot name="left-content" v-bind="(elect as any)"></slot>
    <van-icon
      :class="{ rotate: show }"
      class="transition ML-xs"
      name="arrow-down"
    />
    <slot name="right-content" v-bind="(elect as any)"></slot>
    <Rpopup ref="RpopupRef" :position="'bottom'">
      <van-picker
        @confirm="onPickerConfirm"
        @cancel="close"
        :title="$t('qing-xuan-ze')"
        :columns="props.pickerData?.map((v, k) => ({ ...v, value: k }))"
      >
        <template #option="option: any">
          <slot name="option" v-bind="option">{{ option }}</slot>
        </template>
      </van-picker>
    </Rpopup>
  </div>
</template>
<style lang="less" scoped>
.rotate {
  transform: rotate(180deg);
}
.transition {
  transition: all 200ms linear;
}
</style>
